<script setup>
import { ref } from 'vue'

// 热门视频教程
const popularVideos = ref([
  {
    id: 1,
    title: '新手入门必学：基础操作与设置优化',
    duration: '15:30',
    views: '245,890',
    uploadDate: '2024-06-10',
    thumbnailUrl: 'https://picsum.photos/id/264/400/225',
    category: '入门教程',
    description: '详细讲解和平精英的基础操作和设置优化，帮助新手玩家快速上手。'
  },
  {
    id: 2,
    title: '4AM战队教练教你如何成为顶尖狙击手',
    duration: '22:15',
    views: '189,760',
    uploadDate: '2024-06-15',
    thumbnailUrl: 'https://picsum.photos/id/265/400/225',
    category: '枪法教学',
    description: '4AM战队教练分享狙击枪使用技巧和训练方法，提升你的远距离作战能力。'
  },
  {
    id: 3,
    title: '职业选手揭秘：决赛圈生存与制胜技巧',
    duration: '18:45',
    views: '156,320',
    uploadDate: '2024-06-20',
    thumbnailUrl: 'https://picsum.photos/id/266/400/225',
    category: '战术分析',
    description: '揭秘职业选手在决赛圈的生存策略和制胜技巧，让你成为吃鸡高手。'
  },
  {
    id: 4,
    title: '全武器伤害数据与配件搭配详解',
    duration: '25:10',
    views: '143,650',
    uploadDate: '2024-06-25',
    thumbnailUrl: 'https://picsum.photos/id/267/400/225',
    category: '武器攻略',
    description: '详细分析所有武器的伤害数据和最佳配件搭配，助你选择最适合的武器。'
  }
])

// 视频分类
const categories = ref([
  { id: 'all', name: '全部视频' },
  { id: 'beginner', name: '入门教程' },
  { id: 'guns', name: '枪法教学' },
  { id: 'tactics', name: '战术分析' },
  { id: 'weapons', name: '武器攻略' },
  { id: 'maps', name: '地图教学' },
  { id: 'tournament', name: '赛事解说' }
])

// 职业选手教学系列
const proPlayerSeries = ref([
  {
    id: 1,
    playerName: 'GodV',
    team: '4AM',
    position: '指挥',
    videoCount: 12,
    imageUrl: 'https://picsum.photos/id/268/120/120',
    description: '4AM战队核心成员，擅长指挥和狙击，教学视频以战术分析为主。'
  },
  {
    id: 2,
    playerName: 'XQF伞兵',
    team: 'XQF',
    position: '突击手',
    videoCount: 8,
    imageUrl: 'https://picsum.photos/id/269/120/120',
    description: 'XQF战队王牌突击手，擅长近战钢枪，教学视频注重枪法训练。'
  },
  {
    id: 3,
    playerName: 'Tianba linshao',
    team: 'Tianba',
    position: '自由人',
    videoCount: 10,
    imageUrl: 'https://picsum.photos/id/270/120/120',
    description: 'Tianba战队全能选手，擅长各种位置，教学视频内容丰富全面。'
  }
])

// 最新上传视频
const latestVideos = ref([
  {
    id: 1,
    title: '新版本更新详解：武器平衡调整与新玩法',
    duration: '16:20',
    uploadDate: '2024-07-01',
    thumbnailUrl: 'https://picsum.photos/id/271/200/112'
  },
  {
    id: 2,
    title: '萨诺地图最佳落点与打野路线',
    duration: '14:45',
    uploadDate: '2024-07-02',
    thumbnailUrl: 'https://picsum.photos/id/272/200/112'
  },
  {
    id: 3,
    title: '投掷物高级技巧教学',
    duration: '18:30',
    uploadDate: '2024-07-03',
    thumbnailUrl: 'https://picsum.photos/id/273/200/112'
  },
  {
    id: 4,
    title: '和平精英职业联赛精彩操作集锦',
    duration: '12:15',
    uploadDate: '2024-07-04',
    thumbnailUrl: 'https://picsum.photos/id/274/200/112'
  }
])

// 当前选择的分类
const selectedCategory = ref('all')
</script>

<template>
  <div class="videos-view">
    <div class="container">
      <h1 class="page-title">视频教程</h1>
      
      <!-- 视频分类 -->
      <div class="categories">
        <button 
          v-for="category in categories"
          :key="category.id"
          class="category-btn"
          :class="{ active: selectedCategory === category.id }"
          @click="selectedCategory = category.id"
        >
          {{ category.name }}
        </button>
      </div>
      
      <!-- 热门视频 -->
      <section class="popular-section">
        <h2 class="section-title">热门视频教程</h2>
        <div class="videos-grid">
          <div 
            v-for="video in popularVideos"
            :key="video.id"
            class="video-card"
          >
            <div class="video-thumbnail">
              <div class="thumbnail-image" :style="{ backgroundImage: `url(${video.thumbnailUrl})` }"></div>
              <div class="video-duration">{{ video.duration }}</div>
            </div>
            <div class="video-info">
              <div class="video-category">{{ video.category }}</div>
              <h3 class="video-title">{{ video.title }}</h3>
              <p class="video-description">{{ video.description }}</p>
              <div class="video-meta">
                <span class="video-views">{{ video.views }} 次观看</span>
                <span class="video-date">{{ video.uploadDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 职业选手教学 -->
      <section class="pro-section">
        <h2 class="section-title">职业选手教学系列</h2>
        <div class="pro-players">
          <div 
            v-for="player in proPlayerSeries"
            :key="player.id"
            class="player-card"
          >
            <div class="player-image" :style="{ backgroundImage: `url(${player.imageUrl})` }"></div>
            <div class="player-info">
              <h3 class="player-name">{{ player.playerName }}</h3>
              <div class="player-team">{{ player.team }} - {{ player.position }}</div>
              <p class="player-description">{{ player.description }}</p>
              <div class="player-videos">
                {{ player.videoCount }} 个教学视频
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 最新视频 -->
      <section class="latest-section">
        <h2 class="section-title">最新上传</h2>
        <div class="latest-grid">
          <div 
            v-for="video in latestVideos"
            :key="video.id"
            class="latest-video"
          >
            <div class="latest-thumbnail" :style="{ backgroundImage: `url(${video.thumbnailUrl})` }"></div>
            <div class="latest-info">
              <h3 class="latest-title">{{ video.title }}</h3>
              <div class="latest-meta">
                <span class="latest-duration">{{ video.duration }}</span>
                <span class="latest-date">{{ video.uploadDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 精选系列 -->
      <section class="series-section">
        <h2 class="section-title">精选系列教程</h2>
        <div class="series-grid">
          <div class="series-item">
            <h3 class="series-title">新手成长计划</h3>
            <p class="series-description">10集系列教程，从零基础到吃鸡大神的完整成长路径</p>
            <div class="series-count">10 个视频</div>
          </div>
          <div class="series-item">
            <h3 class="series-title">武器大师课</h3>
            <p class="series-description">详细讲解每种武器的使用技巧和配件搭配</p>
            <div class="series-count">15 个视频</div>
          </div>
          <div class="series-item">
            <h3 class="series-title">地图全解析</h3>
            <p class="series-description">深入分析每个地图的特点和最佳战术</p>
            <div class="series-count">8 个视频</div>
          </div>
        </div>
      </section>
      
      <!-- 视频播放建议 -->
      <section class="tips-section">
        <h2 class="section-title">观看学习建议</h2>
        <div class="tips-container">
          <div class="tip-item">
            <h3>如何高效学习视频教程？</h3>
            <ul>
              <li>观看视频时，注意记录重要知识点和技巧</li>
              <li>看完教程后，进行实战练习巩固所学内容</li>
              <li>对于复杂技巧，可以放慢视频速度反复观看</li>
              <li>结合自身游戏风格，选择适合自己的教学视频</li>
            </ul>
          </div>
          <div class="tip-item">
            <h3>新手学习路径推荐</h3>
            <ul>
              <li>第一阶段：基础操作和设置优化</li>
              <li>第二阶段：武器使用和基础枪法</li>
              <li>第三阶段：地图认知和战术意识</li>
              <li>第四阶段：团队配合和高级技巧</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
.videos-view {
  padding: 2rem 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  font-size: 2.5rem;
  color: var(--color-pubg-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.category-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--color-pubg-primary);
  background-color: transparent;
  color: var(--color-pubg-primary);
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}

.category-btn:hover {
  background-color: var(--color-pubg-primary);
  color: white;
}

.category-btn.active {
  background-color: var(--color-pubg-primary);
  color: white;
}

.section-title {
  font-size: 1.8rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--color-pubg-primary);
}

.popular-section {
  margin-bottom: 3rem;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.video-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  height: 200px;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  font-size: 0.9rem;
}

.video-info {
  padding: 1.5rem;
}

.video-category {
  display: inline-block;
  background-color: var(--color-pubg-primary-light);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.video-title {
  font-size: 1.3rem;
  color: var(--color-heading);
  margin-bottom: 0.8rem;
}

.video-description {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 0.9rem;
}

.pro-section {
  margin-bottom: 3rem;
}

.pro-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.player-card {
  background-color: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.player-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--color-pubg-primary);
}

.player-info {
  flex: 1;
}

.player-name {
  font-size: 1.3rem;
  color: var(--color-pubg-primary);
  margin-bottom: 0.3rem;
}

.player-team {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.player-description {
  color: var(--color-text);
  margin-bottom: 0.8rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.player-videos {
  color: var(--color-pubg-primary);
  font-weight: 500;
}

.latest-section {
  margin-bottom: 3rem;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.latest-video {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.latest-video:hover {
  transform: translateY(-3px);
}

.latest-thumbnail {
  height: 140px;
  background-size: cover;
  background-position: center;
}

.latest-info {
  padding: 1rem;
}

.latest-title {
  font-size: 1.1rem;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.latest-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 0.85rem;
}

.series-section {
  margin-bottom: 3rem;
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.series-item {
  background-color: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--color-pubg-primary);
  transition: transform 0.3s ease;
}

.series-item:hover {
  transform: translateY(-3px);
}

.series-title {
  font-size: 1.3rem;
  color: var(--color-pubg-primary);
  margin-bottom: 0.5rem;
}

.series-description {
  color: var(--color-text);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

.series-count {
  color: #777;
  font-size: 0.9rem;
}

.tips-section {
  margin-bottom: 2rem;
}

.tips-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tip-item {
  background-color: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tip-item h3 {
  color: var(--color-pubg-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.tip-item ul {
  padding-left: 1.5rem;
}

.tip-item li {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .videos-grid,
  .pro-players,
  .latest-grid,
  .series-grid,
  .tips-container {
    grid-template-columns: 1fr;
  }
  
  .categories {
    flex-direction: column;
    align-items: center;
  }
  
  .category-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .player-card {
    flex-direction: column;
    text-align: center;
  }
}
</style>